<template>
  <div class="list-wrapper training-list-wrapper">
    <div class="list-top">
      <el-form :inline="true" :model="searchForm">
        <el-form-item label="课程名称" >
          <el-select v-model="searchForm.courseid" placeholder="请选择课程名称" filterable clearable @change="fetchData">
            <el-option v-for="item in courseList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="课程类型">
          <el-select v-model="searchForm.type" placeholder="请选择课程类型" filterable clearable @change="fetchData">
            <el-option v-for="item in courseTypeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="教室">
          <el-select v-model="searchForm.classroom" placeholder="请选择教室" filterable clearable @change="fetchData">
            <el-option v-for="item in classroomList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="主讲培训师">
          <el-select v-model="searchForm.trainer" placeholder="请选择主讲培训师" filterable clearable @change="fetchData">
            <el-option v-for="item in staffList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item><br>
        <el-form-item label="开课时间">
          <el-date-picker v-model="searchForm.startdate" type="daterange" placeholder="选择开课时间" @change="fetchData"></el-date-picker>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="searchForm.state" placeholder="请选择状态" clearable @change="fetchData">
            <el-option label="计划" value="1"></el-option>
            <el-option label="确定" value="2"></el-option>
            <el-option label="取消" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="">
          <el-checkbox v-model="searchForm.all" @change="fetchData">查看全部</el-checkbox>
        </el-form-item>

      </el-form>
    </div>
    <table class="list-table" border="0" cellspacing="0" cellpadding="0">
      <thead>
        <tr>
          <th>
            <router-link to="add">
              <img src="../../img/add.png" alt="">
            </router-link></th>
          <th>课程编号</th>
          <th>课程名称</th>
          <th>开课时间</th>
          <th>结课时间</th>
          <th>教室</th>
          <th>主讲培训师</th>
          <th>开课次数</th>
          <th>状态</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in list" :key="item.id">
          <td>
            <img src="../../img/edit.gif" alt="" @click="edit(item.id)">
            <img src="../../img/del.png" alt="" @click="del(item.id)">
            <img src="../../img/excel.gif" alt="" @click="download(item.id)">
            <img src="../../img/detail.png" alt="" @click="onDetail(item.id)">
          </td>
          <td>{{item.code}}</td>
          <td>{{item.name}}</td>
          <td>{{item.startdate}}</td>
          <td>{{item.enddate}}</td>
          <td>{{item.classroom}}</td>
          <td>{{item.trainer_name}}</td>
          <td>{{item.coursesum}}</td>
          <td>{{item.state}}</td>
        </tr>
      </tbody>
    </table>
    <div class="namtc-pagination">
      <el-pagination @current-change="handleCurrentChange" :current-page="page" :page-size="10"
                     layout="total, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        searchForm: {
          courseid: '',
          type: '',
          classroom: '',
          trainer: '',
          state: '',
          startdate: '',
          all: false
        },
        list: [],
        page: 1,
        total: 0,
        courseList: [],
        courseTypeList: [],
        classroomList: [],
        staffList: [],
      }
    },
    methods: {
      getCourseList(){
        this.apiPost('System/courseLists').then(res=>{
          this.courseList = res
        })
      },
      getCourseTypeList(){
        this.apiPost('System/courseTypeLists').then(res=>{
          this.courseTypeList = res
        })
      },
      getClassroomList(){
        this.apiPost('System/getClassroomLists').then(res=>{
          this.classroomList = res
        })
      },
      getStaffList(){
        this.apiPost('System/getStaffLists').then(res=>{
          this.staffList = res
        })
      },
      fetchData(){
        let data = this.searchForm
        data.page = this.page
        this.apiPost('Train/trainingList', data).then(res=>{
          this.list = res.list
          this.total = parseInt(res.total)
        })
      },


      handleCurrentChange(val){
        this.page = val
        this.fetchData()
      },

      onDetail(id) {
      	router.push('/training/listDetail/'+id);
      },
      edit(id){
        router.push('/training/edit/'+id);
      },
      download(id){
        let data = {
          id: id
        }
        this.apiPost('Train/trainingCourseTable', data).then(res=>{
          window.location.href = res
        })
      },
      del(id){
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let data = {
            id: id
          }
          this.apiPost('Train/trainingDelete', data).then(res=>{
            let remind = res.error?'error':'success'
            _g.toastMsg(remind, res.msg)
            if(!res.error){
              this.fetchData()
            }
          })
        }).catch(() => {

        });
      }
    },
    created(){
      this.fetchData()
      this.getCourseList()
      this.getCourseTypeList()
      this.getClassroomList()
      this.getStaffList()
    }
  }
</script>
<style scoped>

</style>
